<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h2></h2>
  <script>
    //数据驱动视图  更新数据的值, 页面会发生对应的变化
    //需求:  obj.msg = '趁着年轻，好好犯病';   =>  <h2>趁着年轻，好好犯病</h2>

    //声明一个对象
    var obj = {
    };

    //获取 h2 元素
    var h2 = document.querySelector('h2');

    //添加 msg 属性, 设置 setter
    Object.defineProperty(obj, 'msg', {
      set: function(value){
        //修改 h2 标签的文本元素
        h2.innerHTML = value;
      }
    });

    //数组信息
    var arr = [
      '不管你说再多的慌，只有自己的内心，是无法欺骗的啊',
      '俄一架运输机坠毁 载多名战俘',
      '美军被打怕了，终于要从这里撤了'
    ];

    // 定义一个下标
    var index = 0;

    // obj.msg = '趁着年轻，好好犯病';
    setInterval(function(){
      //判断是否到底
      if(index === arr.length) {
        index = 0;
      }
      obj.msg = arr[index++];
    }, 2000);


  </script>
</body>
</html>